<template>
  <view class="container">
    <u-navbar
      id="nav-bar"
      :is-back="false"
      :showBackIcon="false"
      :background="{ background: 'transparent' }"
      :border-bottom="false"
      title="收益"
    >
    </u-navbar>

    <image class="bg" src="/static/images/bg.png" mode="widthFix"></image>

    <view class="dataBox">
      <image
        class="dataBox-bg"
        src="/static/images/income-dataShow.png"
        mode="widthFix"
      ></image>
      <view class="dataBox-content">
        <view class="header">
          <view class="tabs">
            <view
              class="tab"
              :class="{ active: currentTab === 0 }"
              @click="tabChange(0)"
              >今日预估收益</view
            >
            <view
              class="tab"
              :class="{ active: currentTab === 1 }"
              @click="tabChange(1)"
              >昨日收益</view
            >
            <view
              class="tab"
              :class="{ active: currentTab === 2 }"
              @click="tabChange(2)"
              >本月预估收益</view
            >
          </view>
          <view class="value">12,999,999.00</view>
        </view>
        <view class="bottom">
          <view class="item">
            <view class="label">今日激活商户</view>
            <view class="value">0</view>
            <view class="compare">较昨日 <text class="up">+12</text></view>
          </view>
          <view class="item">
            <view class="label">今日团队交易(元)</view>
            <view class="value">456,574.21</view>
            <view class="compare">较昨日 <text class="down">-3</text></view>
          </view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="title">
        <text>收益明细</text>
        <image
          class="title-sign"
          src="/static/images/icon-tzgg.png"
          mode="widthFix"
        ></image
      ></view>

      <view class="row">
        <view class="item" @click="navigateTo('/pages/income/incomeDetails')">
          <image
            class="item-img"
            src="/static/images/income-frsy.png"
            mode="widthFix"
          ></image>
          <view class="item-label">分润收益</view>
        </view>
        <view class="item" @click="navigateTo('/pages/income/incomeDetails')">
          <image
            class="item-img"
            src="/static/images/income-dbsy.png"
            mode="widthFix"
          ></image>
          <view class="item-label">达标收益</view>
        </view>
        <view class="item" @click="navigateTo('/pages/income/incomeDetails')">
          <image
            class="item-img"
            src="/static/images/income-yjsy.png"
            mode="widthFix"
          ></image>
          <view class="item-label">押金收益</view>
        </view>
      </view>

      <view class="row">
        <view class="item" @click="navigateTo('/pages/sharedBenefits/index')">
          <image
            class="item-img"
            src="/static/images/income-gxsy.png"
            mode="widthFix"
          ></image>
          <view class="item-label">共享收益</view>
        </view>
        <view class="item" @click="navigateTo('/pages/income/incomeDetails')">
          <image
            class="item-img"
            src="/static/images/income-hksy.png"
            mode="widthFix"
          ></image>
          <view class="item-label">回款收益</view>
        </view>
        <view class="item" @click="navigateTo('/pages/income/incomeDetails')">
          <image
            class="item-img"
            src="/static/images/income-fhsy.png"
            mode="widthFix"
          ></image>
          <view class="item-label">分红收益</view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="title">
        <text>近七日收益</text>
        <image
          class="title-sign"
          src="/static/images/icon-tzgg.png"
          mode="widthFix"
        ></image>
        <u-subsection :list="subsectionList" :current="1"></u-subsection>
      </view>
      <view class="chart">
        <qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
      </view>
    </view>
  </view>
</template>

<script>
import util from '@/common/utils.js';

export default {
  data() {
    return {
      currentTab: 0,
      subsectionList: ['团队', '直营'],
      chartData: {
        categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
        series: [
          {
            name: '交易量(万)',
            data: [35, 36, 31, 33, 13, 34],
          },
        ],
      },
      opts: {
        color: ['#E8BE8C'],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {show:false},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          showTitle: true,
          data: [
            {
              title:'交易量(万)',
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: 'group',
            width: 16,
            barBorderRadius:[8, 8, 0, 0],
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            linearType: 'custom',
            seriesGap: 5,
            linearOpacity: 0,
            barBorderCircle: true,
            customColor: ['#E8BE8C' ],
          },
        },
      },
    };
  },
  onLoad(e) {},
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    tabChange(index) {
      this.currentTab = index;
    },
  },
};
</script>

<style lang="scss" scope>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 30rpx 60rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.dataBox {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  .dataBox-bg {
    width: 100%;
    height: auto;
  }
  .dataBox-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 70rpx 30rpx 50rpx;
    line-height: 1;
    .header {
      width: 100%;
      .tabs {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        overflow: hidden;
        .tab {
          position: relative;
          margin-right: 40rpx;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 24rpx;
          color: rgba($color: #ffffff, $alpha: 0.5);
        }

        .active {
          font-weight: bold;
          font-size: 28rpx;
          color: #ffffff;
          &::after {
            position: absolute;
            bottom: 10rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 52rpx;
            height: 6rpx;
            background: #b7926e;
            border-radius: 3rpx;
            z-index: 9;
          }
        }
      }
      .value {
        margin-top: 20rpx;
        font-family: DIN, sans-serif;
        font-weight: bold;
        font-size: 48rpx;
        color: #ffeacc;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      text-align: center;
      .item {
        flex: 1;
        min-width: 0;
        .label {
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 22rpx;
          color: rgba($color: #ffffff, $alpha: 0.5);
        }
        .value {
          margin-top: 10rpx;
          font-family: DIN, sans-serif;
          font-weight: bold;
          font-size: 32rpx;
          color: #ffeacc;
        }
        .compare {
          margin-top: 10rpx;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 22rpx;
          color: #ffffff;
          .up {
            color: #f03434;
          }

          .down {
            color: #29cc7a;
          }
        }
      }
    }
  }
}

.section {
  margin-top: 30rpx;
  width: 100%;
  height: auto;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    text {
      position: relative;
      font-family: PingFang SC, sans-serif;
      font-weight: 800;
      font-size: 28rpx;
      color: #333333;
      z-index: 9;
    }
    .title-sign {
      position: absolute;
      top: -10rpx;
      left: 95rpx;
      width: 32rpx;
      height: auto;
      z-index: 1;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 0;
      margin-top: 40rpx;
      .item-img {
        width: 72rpx;
        height: 72rpx;
      }
      .item-label {
        margin-top: 16rpx;
        font-family: PingFang SC, sans-serif;
        font-weight: bold;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
}

.chart {
  width: 100%;
  height: 300px;
}
</style>
